<template>
  <div class="screenContent">
    <div class="boxMain" ref="screen">
      <div class="boxTop">
        <Top></Top>
      </div>
      <div class="boxBottom">
        <div class="boxLeft">
          <Overhead class="overhead" :money="money"></Overhead>
          <subentry class="subentry" :subentryList="subentryList"></subentry>
        </div>
        <div class="boxContent">
          <screenMap class="screenMap"></screenMap>
        </div>
        <div class="boxRight">
          <statistics class="statistics" :statisticsList="statisticsList"></statistics>
          <fluctuant class="fluctuant" :fluctuantList="fluctuantList"></fluctuant>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import Top from './screenComponents/top/index.vue'
import Overhead from './screenComponents/overhead/index.vue'
import Subentry from './screenComponents/subentry/index.vue'
import screenMap from './screenComponents/screenMap/index.vue'
import statistics from './screenComponents/statistics/index.vue'
import fluctuant from './screenComponents/fluctuant/index.vue'
import { reqScreenInfo, reqSubentryInfo, reqFluctuantInfo } from '@/api/screen/index.ts'

const route = useRoute()
const router = useRouter()

const screen = ref()
const screenLost = ref([])
const money= ref('')
const subentryList = ref([])
const statisticsList = ref([])
const fluctuantList = ref([])


const getScale = (w = 1920, h = 1080) => {
  const ww = window.innerWidth / w
  const wh = window.innerHeight / h
  return ww < wh ? ww : wh
}

const getScreenList = () => {
  reqScreenInfo({}).then((res: any) => {
    if (res.code == '200') {
      screenLost.value = res.data
      statisticsList.value = res.data.slice(res.data.length-5, res.data.length)
      money.value = res.data[res.data.length-1].money
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
// 获取年度账单的方法
const getSubentryInfo = () => {
  reqSubentryInfo({}).then((res: any) => {
    if (res.code == '200') {
      if (res.data.length) {
        subentryList.value = res.data[res.data.length-1].list.slice(0, 7)
      }
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
// 获取月度账单的方法
const getFluctuantInfo = () => {
  reqFluctuantInfo({}).then((res: any) => {
    if (res.code == '200') {
      if (res.data.length) {
        const result = res.data[res.data.length-1].list
        fluctuantList.value = result.slice(result.length-6, result.length)
      }
    } else {
      ElMessage.error(res.data.message)
    }
  })
}


onMounted(() => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
  getScreenList()
  getSubentryInfo()
  getFluctuantInfo()
})

window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
}

</script>

<style lang="scss" scoped>
.screenContent {
  width: 100vw;
  height: 100vh;
  background: url(@/assets/imgs/IMG_bg.jpg) no-repeat;
  background-size: cover;
  .boxMain {
    width: 1920px;
    height: 1080px;
    margin-top: 5px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform-origin: left top;
    .boxTop {
      width: 100%;
      height: 90px;
    }
    .boxBottom {
      display: flex;  

      .boxLeft {
        flex: 1;
        height: 1040px;
        display: flex;
        flex-direction: column;
        .overhead {
          flex: 1;
        }
        .subentry {
          flex: 1;
        }
      }
      .boxContent {
        flex: 2;
        display: flex;
        flex-direction: column;
        .screenMap {
          margin-top: 250px;
        }
      }
      .boxRight {
        flex: 1;
        height: 1040px;
        display: flex;
        flex-direction: column;
        .statistics {
          flex: 1;
        }
        .fluctuant {
          flex: 1;
        }
      }
    }
  }
}
</style>